<template>
  <div class="search-result">
    <div class="heade-search">
      <div class="search-head">
        <div @click="routerBack" class="back">返回</div>
        <van-search class="com-search"
          v-model.lazy="searchWord"
          placeholder="搜索商品，发现更多优选"
          shape="round"
          @search="searchToWord"
          background="rgb(253,222,74)"
          >
        </van-search>
        <div class="go" @click="searchToWord">搜索</div>
      </div>
      <ul  class="sort-nav">
        <li @click="sortTo(0)" :class="sort === 0 ? 'active' : ''" >
          默认
        </li>
        <li @click="sortTo(1)" :class="sort === 1 ? 'active' : ''" >
          价格最低
        </li>
        <li @click="sortTo(2)" :class="sort === 2 ? 'active' : ''" >
          销量最高
        </li>
      </ul>
    </div>
    <div class="cart-content setPadTop" >
      <ul class="cart-list">
        <cart-item v-for="(item,index) in searchList" :key="item.commodityId + '-' + index"
        :img="item.image"
        :title="item.title"
        :price="item.price"
        :num="item.saleNum"
        :id="item.id"
        :weight="item.couponValue"
        :free-postage="item.isFreePostage"
        :platform="item.platform"
        ></cart-item>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import cartItem from '@/components/CartItem'
import { Search, Toast } from 'vant'
import { mapState, mapMutations, mapActions } from 'vuex'

Vue.use(Search)
Vue.use(Toast)
export default {
  beforeMount () {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      overlay: true, // 是否显示背景遮罩层
      duration: 0 // 不会消失
    })
  },
  created () {
    this.getSearchList({ start: 0, sword: this.$route.params.sword })
  },
  updated () {
    Toast.clear()
  },
  methods: {
    sortTo (sort) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true, // 是否显示背景遮罩层
        duration: 0 // 不会消失
      })
      this.setSort(sort)
      this.getSearchList({ start: 0, sword: this.$route.params.sword, sort: sort })
    },
    routerBack () {
      this.$router.push('/search')
    },
    searchToWord () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true, // 是否显示背景遮罩层
        duration: 0 // 不会消失
      })
      this.$router.push(`/result/${this.keyWord}`)
      this.getSearchList({ start: 0, sword: this.$route.params.sword })
    },
    ...mapActions('searchdata', ['getSearchList']),
    ...mapMutations('searchdata', ['setKeyWord', 'setSort'])
  },
  components: {
    cartItem
  },
  computed: {
    ...mapState('searchdata', ['keyWord', 'searchList']),
    ...mapState('searchdata', ['sort']),
    searchWord: {
      get: function () {
        return this.keyWord
      },
      set: function (newValue) {
        this.setKeyWord(newValue)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.heade-search{
  position: fixed;
  z-index: 111;
  width: 100%;
  box-sizing: border-box;
}
.sort-nav{
  justify-content: space-around;
  height: 3.12rem;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  align-items: center;
  display: flex;
  li{
    font-size: .32rem;
  }
  .active{
    color: red;
  }
}
</style>
